
<template>
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">添加：</label>
    <input v-model="newTodoText" id="new-todo" placeholder="添加一个todo" />
    <button>添加</button>
  </form>
  <ul>
    <Demo
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="removeTodo(index)"
      @edit="editTodo(index, $event)"
    ></Demo>
  </ul>
</template>

<script setup>
import { ref } from 'vue';
import Demo from '../components/Demo.vue';

const newTodoText = ref('');
const todos = ref([
  {
    id: 1,
    title: 'Do the dishes',
    done: false,
  },
  {
    id: 2,
    title: 'Take out the trash',
    done: true,
  },
  {
    id: 3,
    title: 'Mow the lawn',
    done: false,
  },
]);

let nextTodoId = 4;

const addNewTodo = () => {
  todos.value.push({
    id: nextTodoId++,
    title: newTodoText.value,
  });
  newTodoText.value = '';
};

const removeTodo = (index) => {
  console.log(1);
  const updatedTodos = [...todos.value];
  updatedTodos.splice(index, 1);
  todos.value = updatedTodos;
};

const editTodo = (index, newTitle) => {
  todos.value[index].title = newTitle;
};
</script>


